import React, { useState, useEffect } from 'react';
import { Card, Form, Input, Button, Select, message } from 'antd';
import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
import { history } from '@umijs/max';
import { createUser } from '@/services/userApi';

const { Option } = Select;

const UserCreate: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 提交表单
  const handleSubmit = async (values: any) => {
    setLoading(true);
    try {
      // 合并姓和名作为first_name存储
      const userData = {
        ...values,
        first_name: `${values.first_name || ''} ${values.last_name || ''}`.trim(),
        is_active: values.is_active === 'true'
      };
      
      // 删除独立的姓和名字段
      delete userData.last_name;
      
      await createUser(userData);
      message.success('创建成功');
      history.push('/users/list');
    } catch (error) {
      message.error('创建失败');
    } finally {
      setLoading(false);
    }
  };

  // 角色选项
  const roleOptions = [
    { value: 'admin', label: '管理员' },
    { value: 'librarian', label: '图书管理员' },
    { value: 'user', label: '普通用户' },
  ];

  return (
    <div>
      <Card style={{ marginBottom: 16 }}>
        <Button 
          icon={<ArrowLeftOutlined />} 
          onClick={() => history.push('/users/list')}
        >
          返回列表
        </Button>
      </Card>

      <Card title="新增用户">
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
        >
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>

          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入正确的邮箱格式' }
            ]}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>

          <Form.Item
            name="password"
            label="密码"
            rules={[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码长度至少6位' }
            ]}
          >
            <Input.Password placeholder="请输入密码" />
          </Form.Item>

          <Form.Item
            name="first_name"
            label="姓"
          >
            <Input placeholder="请输入姓" />
          </Form.Item>

          <Form.Item
            name="last_name"
            label="名"
          >
            <Input placeholder="请输入名" />
          </Form.Item>

          <Form.Item
            name="role"
            label="角色"
            rules={[{ required: true, message: '请选择角色' }]}
          >
            <Select placeholder="请选择角色">
              {roleOptions.map(option => (
                <Option key={option.value} value={option.value}>
                  {option.label}
                </Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item
            name="is_active"
            label="状态"
            rules={[{ required: true, message: '请选择状态' }]}
            initialValue="true"
          >
            <Select placeholder="请选择状态">
              <Option value="true">启用</Option>
              <Option value="false">禁用</Option>
            </Select>
          </Form.Item>

          <Form.Item>
            <Button 
              type="primary" 
              htmlType="submit" 
              icon={<SaveOutlined />}
              loading={loading}
            >
              创建用户
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default UserCreate;